<template>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex">
          <SortSelect3 v-model:value="sortKey" @on-select="search"></SortSelect3>
        </div>
        <div style="display: flex">
          <n-button size="large" round type="success" style="font-size: 22px;margin: 0 10px" @click="handleCreate">创建
          </n-button>
          <SearchInput v-model:value="searchKey" @change="search" placeholder="ID/标题" :loading="loading"></SearchInput>
        </div>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
            <CurdTable ref="tableRef"
                       :get-data="api.notice.list"
                       :columns="columns"
                       :and-params="andParams"
                       :or-params="orParams"
                       :order-params="orderParams">
            </CurdTable>
      </section>
    </article>
    <NoticeModal :mode="modalMode" v-model:show="modalShow" :data="modalData" @onConfirm="confirm"></NoticeModal>
  </CommonPage>
</template>

<script setup lang="ts">
import {h, onMounted, ref} from "vue";
import api from "@/api";
import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import SearchInput from "@/components/common/input/SearchInput.vue";
import NoticeModal from "@/components/example/modal/NoticeModal.vue";
import {NButton, NEllipsis, NText} from "naive-ui";
import myMoment from "@/utils/common/myMoment";
import SortSelect3 from "@/components/example/select/SortSelect3.vue";

/** QueryBar筛选参数（可选） */
const orParams = ref({
  title:'',
  id:'',
})
/** 补充参数（可选） */
const andParams = ref({})
/** 排序参数(可选）*/
const orderParams = ref({
  createTime:''
})
const sortKey =ref('2')
const modalData = ref()
const modalShow = ref()
const modalMode = ref()
const searchKey = ref('')
const tableRef = ref()
const loading = ref()
const columns = ref([
  {title: 'ID', key: 'id', width: 3, ellipsis: {tooltip: true}},
  {
    title: '标题', key: 'title', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.title})
    }
  },
  {
    title: '创建人', key: 'creatorUsername', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.creatorUsername})
    }
  },
  {
    title: '收信人', key: 'receiveUsername', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.receiveUsername||'全部 '})
    }
  },
  {
    title: '创建时间', key: 'createTime', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.createTime).format("MMMDo HH:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.createTime).startOf('minute').fromNow()}),
      ])
    }
  },
  {
    title: '更新时间', key: 'updateTime', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.updateTime).format("MMMDo HH:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.updateTime).startOf('minute').fromNow()}),
      ])
    }
  },
  {
    title: '发布状态', key: 'status', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {
        style: {
          fontSize: '14px',
          color: row.status === 0 ? 'red' : 'green'
        }
      }, {default: () => row.status === 0 ? '未发布' : '已发布'})
    }
  },
  {
    title: '操作', key: 'actions', width: 14, align: 'center',
    render(row: any) {
      return [
        h(NButton, {
          round: true,
          size:'small',
          secondary: true,
          onClick: () => handleQuery(row)
        }, {default: () => "查看"}),
        h(NButton, {
          round: true,
          secondary: true,
          size:'small',
          type: "info",
          onClick: () => handleUpdate(row)
        }, {default: () => "编辑"}),
        h(NButton, {
          round: true,
          size:'small',
          secondary: true,
          type: "warning",
           onClick: () => handlePublish(row)
        }, {default: () => "发布"}),
        h(NButton, {
          round: true,
          size:'small',
          secondary: true,
          type: "error",
          onClick: () => handleRevoke(row)
        }, {default: () => "取消"}),]
    }
  }
])
onMounted(() => {
  search()
})

const confirm  =()=>{
  search()
  modalShow.value=false
}
const handleCreate = () => {
  modalMode.value = 'create'
  modalShow.value = true
  modalData.value = {}
}
const handleQuery = (row: any) => {
  modalMode.value = 'query'
  modalShow.value = true
  modalData.value = row
}
const handleUpdate = (row: any) => {
  modalMode.value = 'update'
  modalShow.value = true
  modalData.value = row
}
const handlePublish = (row:any) => {
  window.$dialog.info({
    title:'确定要发布此公告吗',
    positiveText:'确定',
    negativeText:'取消',
    onPositiveClick:()=>{
      api.notice.publish({
        id:row.id
      }).then(res=>{
        if(res&&res.data.code===0){
          window.$message.success(res.data.msg)
          search()
        }
      })
    }
  })
}
const handleRevoke = (row:any) => {
  window.$dialog.info({
    title:'确定要撤销此公告吗',
    positiveText:'确定',
    negativeText:'取消',
    onPositiveClick:()=>{
      api.notice.revoke({
        id:row.id
      }).then(res=>{
        if(res&&res.data.code===0){
          window.$message.success(res.data.msg)
          search()
        }
      })
    }
  })
}

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '1') {
    orderParams.value.createTime='1'
  }else if(sortKey.value==='2'){
    orderParams.value.createTime='2'
  }else {
    orderParams.value.createTime=''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}

</script>

<style scoped>

</style>